<template>
  <div class="item-bg" style="width: 100%; height: 100%">
    <span class="title">评阅详情</span>
    <a-table
      class="tabsty"
      rowKey="index"
      :pagination="false"
      :columns="creterColumns()"
      :scroll="{ x: 1000 }"
      :data-source="list"
      :loading="loading"
      size="small"
      bordered
      :row-class-name="
        (record, index) => {
          if (record?.hasChildFlag) return 'font-bold text-lg bg-gray-200'
          if (!record?.statistics?.pywcRate) return 'bg-red-200'
          if (record?.statistics?.pywcRate < 1) return 'bg-orange-200'
          return 'bg-green-200'
        }
      "
    >
      <template #bodyCell="{ column, record }">
        <template v-if="column.dataIndex === 'pywc' && !record?.hasChildFlag">
          <div class="pr-5">
            <a-progress
              stroke-color="#10C0B6"
              :percent="Number(record?.statistics?.pywcRate || 0) * 100"
              :format="percent => `${percent.toFixed(2)}%`"
            />
          </div>
          <span>
            <i class="text-green-600"> {{ record?.statistics?.pywcNum || 0 }} </i>/
            {{ record?.statistics?.ysmKsNum || 0 }}
          </span>
        </template>
        <template v-if="column.dataIndex === 'pyz' && !record?.hasChildFlag">
          <div class="pr-5">
            <a-progress
              stroke-color="#F97316"
              :percent="Number(record?.statistics?.pyzRate || 0) * 100"
              :format="percent => `${percent.toFixed(2)}%`"
            />
          </div>
          <span>
            <i class="text-orange-600"> {{ record?.statistics?.pyzNum || 0 }} </i> /
            {{ record?.statistics?.ysmKsNum || 0 }}
          </span>
        </template>
        <template v-if="column.dataIndex === 'wpy' && !record?.hasChildFlag">
          <div class="pr-5">
            <a-progress
              stroke-color="#DC2626"
              :percent="Number(record?.statistics?.wpyRate || 0) * 100"
              :format="percent => `${percent.toFixed(2)}%`"
            />
          </div>
          <span>
            <i class="text-red-600"> {{ record?.statistics?.wpyNum || 0 }} </i> /
            {{ record?.statistics?.ysmKsNum || 0 }}
          </span>
        </template>
      </template>
    </a-table>
  </div>
</template>
<script lang="ts" setup>
import { onMounted, watch } from 'vue'
import dayjs from 'dayjs'
import duration from 'dayjs/plugin/duration'
import { useList } from '/@/hooks/web/useList'
import { creterColumns } from '/@/views/home/index/index'
import { getcommonKmSummarySt, getKmPyProcess } from '/@/api/teacher'

dayjs.extend(duration)

const props = defineProps({
  activeKey: {
    type: String,
    default: '',
  },
  kmdm: {
    type: String,
    default: '',
  },
})

watch([() => props.activeKey, () => props.kmdm], async () => {
  list.value = []
  if (!props.kmdm || !props.activeKey) {
    return
  }
  updateData()
})

function updateData() {
  filterOption.value.zpDataFlag = props.activeKey === 'FORMAL' ? 'true' : 'false'
  filterOption.value.kmdm = props.kmdm
  loadData(1)
}

const { loadData, list, loading, filterOption } = useList(getcommonKmSummarySt, {
  defaultFilterOption: {
    kmdm: props.kmdm,
    zpDataFlag: props.activeKey === 'FORMAL' ? 'true' : 'false',
  } as any,
  immediate: false,
  transformFn(e) {
    if (e.code == 200) {
      let data = e.data.filter(
        item => item.tmlx !== '单项选择题' && item.tmlx !== '多项选择题' && item.tmlx !== '判断题'
      )
      return {
        code: 200,
        data,
        msg: '查询成功',
      }
    } else return e
  },
  requestSuccess(e) {
    getKmApplyOverview()
  },
})

function getKmApplyOverview() {
  if (list.value?.length == 0) return
  getKmPyProcess({
    kmdm: props.kmdm,
    zpDataFlag: props.activeKey === 'FORMAL' ? 'true' : 'false',
  }).then(res => {
    if (res.code == 200)
      for (let i = 0; i < list.value.length; i++) {
        list.value[i].statistics = {}
        for (let j = 0; j < res.data.length; j++) {
          if (list.value[i].stId == res.data[j].stId) {
            list.value[i].statistics = res.data[j]
            break
          }
        }
      }
  })
}

onMounted(() => {})
</script>
<style lang="less" scoped>
.item-bg {
  display: flex;
  flex-direction: column;
  background: #ffffff;
  box-shadow: 0px 0px 6px 1px rgba(128, 144, 219, 0.16);
  border-radius: 6px 6px 6px 6px;
  position: relative;

  .title {
    width: 100%;
    padding: 16px;
    font-weight: bold;
    color: #3f4355;
    font-size: 16px;
    font-family: PingFang SC-Bold, PingFang SC;
    border-bottom: 2px solid #f0f1f8;
  }
}

.search {
  padding: 0 15px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.tabsty {
  margin: 0 0 10px 0;
}

.pagination {
  padding: 10px 0 0 20px;
}

.form {
  padding: 20px;
}
</style>
<style lang="less">
.teacherList {
  .ant-table-thead > tr > th {
    background: #f2f2f2 !important;
  }
}
</style>
